<template>
  <view class="example">
    <view class="page-editor-container">
      <sv-editor
        eid="sv-editor-1"
        :maxlength="100"
        @ready="ready"
        @input="input"
        @overmax="overMax"
        @epaste="epaste"
      ></sv-editor>
    </view>
    <view class="page-editor-container">
      <sv-editor
        eid="sv-editor-2"
        pasteMode="origin"
        :maxlength="100"
        @ready="ready"
        @input="input"
        @overmax="overMax"
        @epaste="epaste"
      ></sv-editor>
    </view>
    <view class="page-editor-toolbar-container">
      <sv-editor-toolbar
        ref="toolbarRef"
        :tools="['style', 'emoji', 'more']"
        :moreTools="['image', 'video', 'link', 'clear']"
        @toolMoreItem="onToolMoreItem"
        @moreItemConfirm="moreItemConfirm"
      ></sv-editor-toolbar>
    </view>
  </view>
</template>

<script>
import SvEditorToolbar from '@/uni_modules/sv-editor/components/sv-editor/sv-editor-toolbar.vue'
import { addImage, addLink, addVideo } from '@/uni_modules/sv-editor/components/common/utils.js'

export default {
  components: {
    SvEditorToolbar
  },
  data() {
    return {}
  },
  methods: {
    ready(e) {
      console.log('==== ready :', e)
      switch (e.id) {
        case 'sv-editor-1':
          this.editorCtx1 = e
          this.editorCtx1.initHtml(`<p>🏀开发时长一坤年🏀</p>`)
          break
        case 'sv-editor-2':
          this.editorCtx2 = e
          // this.editorCtx2.initHtml(`<p>🏀开发时长两年半🏀</p>`)
          break
      }
    },
    input(e) {
      console.log('input ==>', e)
    },
    epaste(e) {
      console.log('epaste ==>', e)
    },
    overMax(e) {
      console.log('overMax ==>', e)
    },
    onToolMoreItem(e) {
      console.log('onToolMoreItem ==>', e)

      if (e.name == 'clear') {
        uni.showModal({
          title: '提示',
          content: '确定要清空内容吗？',
          success: ({ confirm }) => {
            if (confirm) {
              this.editorCtx1.clear()
              this.editorCtx2.clear()
            }
          }
        })
      }
    },
    async moreItemConfirm(e) {
      console.log('moreItemConfirm ==>', e)

      // 添加图片
      if (e.name == 'image') {
        const imageRes = await addImage(
          async () => {
            // 开发者自行调用接口上传图片至服务器，此处只做模拟
            return new Promise((resolve) => {
              uni.showLoading({ title: '上传中' })
              setTimeout(() => {
                uni.hideLoading()
                let images = []
                if (e.link) images.push({ path: e.link }) // https://img.yzcdn.cn/vant/cat.jpeg
                if (e.file?.length) images = images.concat(e.file)
                resolve(images)
              }, 3000)
            })
          },
          { srcFiled: 'path' }
        )
        if (imageRes) {
          uni.showToast({ title: '添加图片成功', icon: 'success' })
        } else {
          uni.showToast({ title: '添加图片失败', icon: 'error' })
        }
      }

      // 添加视频
      if (e.name == 'video') {
        const videoRes = await addVideo(
          async (editorCtx) => {
            // 开发者自行调用接口上传图片至服务器，此处只做模拟
            return new Promise((resolve) => {
              uni.showLoading({ title: '上传中' })
              setTimeout(async () => {
                uni.hideLoading()
                let videos = []
                if (e.link) {
                  const linkThumbnail = await editorCtx.createVideoThumbnail(e.link)
                  videos.push({
                    imagePath: linkThumbnail,
                    tempFilePath: e.link // https://www.w3schools.com/html/movie.mp4
                  })
                }
                if (e.file.tempFilePath) {
                  const fileThumbnail = await editorCtx.createVideoThumbnail(e.file.tempFilePath)
                  // 视频封面
                  e.file.imagePath = fileThumbnail
                  videos.push(e.file)
                }
                resolve(videos)
              }, 3000)
            })
          },
          { imageFiled: 'imagePath', videoFiled: 'tempFilePath', width: '100%' }
        )
        if (videoRes) {
          uni.showToast({ title: '添加视频成功', icon: 'success' })
        } else {
          uni.showToast({ title: '添加视频失败', icon: 'error' })
        }
      }

      // 添加链接
      if (e.name == 'link') {
        addLink({ link: e.link, text: e.text }, () => {
          uni.showToast({ title: '添加链接成功' })
        })
      }

      // 关闭弹窗
      this.$refs.toolbarRef.closeMorePop()
    }
  }
}
</script>

<style lang="scss">
.example {
  box-sizing: border-box;
  height: calc(100vh - var(--window-top) - env(safe-area-inset-bottom));

  .page-editor-container {
    height: 150px;
    border: 10px solid #66ccff;
    box-sizing: border-box;
  }
}
</style>
